<?xml version='1.0' encoding='UTF-8' ?>
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./layout/mainTemplate.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"  
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns="http://www.w3.org/1999/xhtml">
    <ui:define name="top">
        <h:outputLabel value="Sucursal" class="tituloPrincipal"/>
    </ui:define>

    <ui:define name="left">
    </ui:define>
    <ui:define name="content">
        <h:form id="contenido">

            <p:panel header="Manejo">
                <p:messages id="messagesgproducto" showDetail="true" autoUpdate="true" closable="true" > 
                    <p:effect type="fade" event="load" delay="3000" />
                </p:messages>
                <p:panelGrid columns="2">
                    <h:outputLabel value="Ciudad:"/>
                    <p:inputText value="#{sucursalManager.ciudad}"/>
                    
                    <h:outputLabel value="Descripción:"/>
                    <p:inputText value="#{sucursalManager.descripcion}"/>
                    
                    <h:outputLabel value="Direccion:"/>
                    <p:inputText value="#{sucursalManager.direccion}"/>
                    
                    <h:outputLabel value="Telefono:"/>
                    <p:inputText value="#{sucursalManager.telefono}"/>
                    
                    <h:outputLabel value="Latitud:"/>
                    <p:inputText id="lat" value="#{sucursalManager.latitud}"/>
                    
                    <h:outputLabel value="Longitud:"/>
                    <p:inputText id="lng" value="#{sucursalManager.longitud}"/>
                    
                    <h:outputLabel value=""/>
                    <p:commandButton value="Previsualizar coordenadas" action="#{sucursalManager.preview()}" ajax="false"/>
                    
                    <p:commandButton value="Guardar" action="#{sucursalManager.guardar()}" ajax="false"/>
                    <p:commandButton value="Index" action="#{generalManager.returntoIndex()}" ajax="false"/>
                </p:panelGrid>
            </p:panel>
            
            <p:panel header="DIRECCION DE SUCURSAL">
                <p:gmap center="-1.55987, -78.83703" zoom="6" widgetVar="map" type="HYBRID" style="width:600px;height:400px" model="#{sucursalManager.mapaSucursal}"/>    
                <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
                  
            </p:panel>
            
            <p:panel header="SUCURSALES">
                <p:panelGrid columns="1">
                    <p:dataTable id="sucursalestable" var="sucursal" value="#{sucursalManager.sucursales}" paginator="true" rows="10">
                                <!-- selection="{rutaAction.direccionAuxiliar}" selectionMode="multiple"-->

                       <f:facet name="header">  
                           LISTADO DE SUCURSALES
                       </f:facet>  

                       <p:column headerText="ID">  
                           #{sucursal.idScursal}  
                       </p:column>  
                                
                        <p:column headerText="CIUDAD">  
                           #{sucursal.ciudad}  
                       </p:column> 

                       <p:column headerText="DIRECCION">  
                           #{sucursal.direccion}  
                       </p:column>  

                       <p:column headerText="TELEFONO" >  
                           #{sucursal.telefono}  
                       </p:column> 
                                
                       <p:column headerText="DESCRIPCION">  
                           #{sucursal.descripcion}  
                       </p:column>  

                       <p:column headerText="">  
                           <p:commandLink action="#{sucursalManager.editarSucursal(sucursal)}" value="Modificar" ajax="false"/> 
                       </p:column>   
                   </p:dataTable>
                </p:panelGrid>
            </p:panel>
            
            <p:panel header="SUCURSALES EXISTENTES">
                <script src="http://maps.google.com/maps/api/js?sensor=true" type="text/javascript"></script>
                <p:gmap center="-1.55987, -78.83703" zoom="6" type="HYBRID" style="width:600px;height:400px" model="#{sucursalManager.mapaSucursales}"/>    
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>


